<template>
  <div class="venus-list-page" style="text-align: center;">
    <venus-steps :active="active" :step-data="stepData">
      <el-step title=用户开卡""></el-step>
      <el-step title=信息录入""></el-step>
      <el-step title=注册""></el-step>
    </venus-steps>

    <!-- <div class="venus-list-page" style="text-align: center;"> -->
    <div v-if="active===1" style="margin-top: 10px;">
      <div class="demo-input-suffix">

        <el-form ref="form" :model="form" label-width="160px">
          <el-row type="flex">
            <el-form-item label="市场:">
              <el-input v-model="form.market"></el-input>
            </el-form-item>
            <el-form-item label="债券名称:">
              <el-input v-model="form.bond_name"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="债券代码:">
              <el-input v-model="form.bond_code"></el-input>
            </el-form-item>
            <el-form-item label="债券全称:">
              <el-input v-model="form.full_name"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="债券属性:">
              <el-input v-model="form.bond_prop"></el-input>
            </el-form-item>
            <el-form-item label="基础利率来源:">
              <el-input v-model="form.baserate_type"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="票息品种:">
              <el-input v-model="form.interest_type"></el-input>
            </el-form-item>
            <el-form-item label="付息利率品种:">
              <el-input v-model="form.interest_sort"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="发行基础利率(%):">
              <el-input v-model="form.base_rate"></el-input>
            </el-form-item>
            <el-form-item label="利差(%):">
              <el-input v-model="form.bond_spread"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="付息频率:">
              <el-input v-model="form.pay_freq"></el-input>
            </el-form-item>
            <el-form-item label="发行价:">
              <el-input v-model="form.issue_price"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="票面利率:">
              <el-input v-model="form.coupon_rate"></el-input>
            </el-form-item>
            <el-form-item label="发行主体:">
              <el-input v-model="form.publisher"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="发行主体所属地区:">
              <el-input v-model="form.area"></el-input>
            </el-form-item>
            <el-form-item label="起息日:">
              <el-input v-model="form.begin_date"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="发行主体所属地区:">
              <el-input v-model="form.area"></el-input>
            </el-form-item>
            <el-form-item label="起息日:">
              <el-input v-model="form.begin_date"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-form-item label="首次付息:">
              <el-input v-model="form.first_pay_date"></el-input>
            </el-form-item>
            <el-form-item label="到期日:">
              <el-input v-model="form.end_date"></el-input>
            </el-form-item>
          </el-row>

        </el-form>
      </div>
    </div>

    <div v-if="active===2" style="margin-top: 10px;">
      <div class="demo-input-suffix">
        输入一：
        <el-input placeholder="请输入" v-model="input1">
        </el-input>
      </div>
      <div class="demo-input-suffix">
        输入二：
        <el-input placeholder="请输入" v-model="input2">
        </el-input>
      </div>
    </div>

    <div v-if="active===3" style="margin-top: 10px;">
      <div class="demo-input-suffix">
        输入三：
        <el-input placeholder="请输入" v-model="input3">
        </el-input>
      </div>
      <div class="demo-input-suffix">
        输入四：
        <el-input placeholder="请输入" v-model="input4">
        </el-input>
      </div>
    </div>

    <div v-if="active===4" style="margin-top: 10px;">
      <div class="demo-input-suffix">
        输入5：
        <el-input placeholder="请输入" v-model="input3">
        </el-input>
      </div>
      <div class="demo-input-suffix">
        输入6：
        <el-input placeholder="请输入" v-model="input4">
        </el-input>
      </div>
    </div>

    <div style="text-align: center;margin-top: 30px;">
      <el-button @click="next" v-if="active != 4">下一步</el-button>
      <el-button @click="save" v-if="active===4">保存</el-button>
      <el-button @click="prev">上一步</el-button>
    </div>
    <!-- </div> -->
  </div>
</template>


<script>
  export default {
    data() {
      return {
        form: {},
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        active: 1,
        stepData: ['新增债券基本信息', '浮息债基础利率', '提前还本信息','债券行权信息']
      }
    },

    methods: {
      next() {
        if (++this.active > this.stepData.length) this.active = this.stepData.length
      },
      prev() {
        if (--this.active < 1) this.active = 1
      },
      save(){
        alert("保存")
      }
    }
  }
</script>
